<template>
    <div class="live-box">
        <p>房间号：{{liveForm.roomNum}}</p>
        <div id="dplayer"></div>
        <div class="chatwin-box">
            <div v-html="htmlContent">
            </div>
            <div class="send-message-box">
                <el-input type="textarea" v-model="messageContent"></el-input>
                <el-button @click="sendMessage" type="success">发送</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import Hls from "hls.js";
export default {
    data () {
        return {
            liveForm: {
                id: '',
                // 播流路径
                playUrl: '',
                socket: null,
            },
            // 当前登录的用户名
            userName: '',
            // 当前登录的用户id
            userId: '',
            // 消息窗口 的消息内容
            messageContent: '',
            // 消息样式
            htmlContent: '',
            dp: null,
        }
    },
    watch: {
        liveForm (newData) {
            console.log(newData)
            if (newData.roomNum !== '') {
                this.$nextTick().then(() => {
                    this.webs()
                    this.player()
                })
            }
        }
    },
    mounted () {
        this.userName  = window.sessionStorage.getItem('userName')
        this.userId  = window.sessionStorage.getItem('id')
        this.liveForm.id = this.$route.query.id
        this.getLiveById()
    },
    methods: {
        // 发送消息
        sendMessage () {
            this.socket.send(this.messageContent)
            this.messageContent = ''
        },
        // 创建对话
        webs () {
            this.socket = new WebSocket("ws://localhost:15000/eat-service/livechat/" + this.userName + "/" + this.userId + "/" + this.liveForm.roomNum);
            //打开socket

            this.socket.onopen = function () {
            }

            var that = this
            //接收到消息的回调方法
            this.socket.onmessage = function (msg) {
                let data = JSON.parse(msg.data)
                var html = ''
                if (data.roomNum == that.liveForm.roomNum) {
                    if (data.come == 0) {
                        html = "<p><span style=\"font-weight: bold\">" + data.username + "：</span>" + data.message + "</p>"
                        const danmaku = {
                            text: data.message,
                            color: '#fff',
                            type: 'right',
                        };
                        that.dp.danmaku.draw(danmaku);
                    } else {
                        html = "<p>" + data.username + data.message + "</p>"
                    }
                }
                that.htmlContent += html
                
            }

            //连接关闭的回调方法
            this.socket.onclose = function () {
                console.log("close");
            }
        },
        // 根据id获取直播间 信息
        getLiveById () {
            this.$axios.get('/eat-service/live/getLiveById', {
                params: {
                    id: this.liveForm.id
                }
            }).then(res => {
                this.liveForm = res.data.obj
            })
        },
        player () {
            var that = this
            this.dp = new this.$dPlayer({
                container: document.getElementById('dplayer'),
                live: true,
                danmaku: true,
                autoplay: true,
                apiBackend: {
                    read: function (options) {
                        console.log('Pretend to connect WebSocket');
                        options.success([]);
                    },
                    send: function (options) {
                        console.log('Pretend to send danmaku via WebSocket', options.data);
                        that.messageContent = options.data.text
                        that.sendMessage()
                        options.success();
                    },
                },
                video: {
                    url: this.liveForm.livePlayUrl,
                    type: 'customHls',
                    customType: {
                        customHls: function (video, player) {
                            const hls = new Hls();
                            hls.loadSource(video.src);
                            hls.attachMedia(video);
                        },
                    },
                },
            })
            this.dp.play()
        },
    }
}
</script>

<style scoped>
.live-box{
    width: 100%;
    height: 530px;
}
.live-box #dplayer{
    width: 70%;
    float:left;
}
.chatwin-box{
    width: 30%;
    height: 100%;
    float:left;
    background-color: gray;
    position: relative;
}
.send-message-box{
    width:100%;
    height: 100px;
    position: absolute;
    bottom: 0;
    left: 0;
}
</style>